<template>
    <h2>sum:{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
    <hr>
    <h2>{{ hello }}</h2>
    <button @click="hello+='!'">点我加感叹号</button>
    <hr>
    <h2>name:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <h3>薪资：{{ job.j.salary }}k</h3>
    <h3>工作：{{ job.j.name }}</h3>
    <button @click="name+='~'">点我变温柔</button>
    <button @click="age++">点我更改年龄</button>
    <button @click="job.j.salary++">点我加薪</button>
  </template>
  
  <script>
  import { ref,reactive, toRef, toRefs } from 'vue';
  export default {
    name:'App',
    setup(){
      let sum = ref(0)
      let hello = ref('你好')
      let person = reactive({
        name:'张扬',
        age:'22',
        job:{
          j:{
            salary:20,
            name:'前端'
          }
        }
      })
      let x = toRefs(person)
      console.log("@@@",x)
      return {
        sum:(sum),
        hello,
        ...toRefs(person)
      }
    }
  }
  </script>
  
  <style>
  
  </style>